<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>酒店查询</title>
    <script src="__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.2.6.4.css" media="all">
    <!--<link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">-->
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<style>
    .roomAndPersonShade{float: left;width:100%;font-size: 16px;text-align: center;}
    .marginBtm20{margin-bottom: 20px;}
    .padding6{padding:6px;}
    .padding6-0{padding:6px 0;}
    .personName{}
    .roomTitle{font-weight: bold;font-size: 18px;}
    .personAge{font-size: 12px;color: #aaa;}
    .caculateNum{line-height: 18px;text-align:center;}
    .caculateNumDec{border: 1px solid #b2b2b2;width:20px;border-radius: 50%;background: #b2b2b2;color: #fff;}
    .caculateNumNum{width: 20px;}
    .caculateNumInc{border: 1px solid #b2b2b2;width:20px;border-radius: 50%;color: #b2b2b2;}
    .addNewRoom,.delOldRoom{margin-right: 10px;float: right}
    .hotelDetailTips{font-size: 18px;margin-left: 10px;}
    .service_icon{margin-right: 4px;}
    .list-body{columns: 3;margin: 15px 0;}
    .list-body .list-wrap{ width: 100%;-moz-page-break-inside: avoid;-webkit-column-break-inside: avoid;break-inside: avoid;}
    .shadowPriceDetails .layui-col-md4{text-align: right!important;}
</style>
<body>
<div id="selectRoomAndPersonTemplate" style="display: none;">
<div class="layui-form roomAndPersonShade">
    <div class="row roomList">
        <div class="layui-col-md12 marginBtm20" >
            <div class="layui-row padding6">
                <div class="layui-col-md6 roomTitle">房间<span class="roomNo">1</span>
                </div>
            </div>
            <div class="layui-row padding6 person">
                <div class="layui-col-md6 personName">成人<br><span class="personAge">18岁及以上</span></div>
                <div class="layui-col-md6 caculateNum">
                    <a class="layui-inline caculateNumDec">－</a>
                    <div class="layui-inline caculateNumNum">1</div>
                    <a class="layui-inline caculateNumInc">＋</a>
                </div>
            </div>
            <div class="layui-row padding6 children">
                <div class="layui-col-md6 personName">儿童<br><span class="personAge">0-17岁</span></div>
                <div class="layui-col-md6 caculateNum">
                    <a class="layui-inline caculateNumDec">－</a>
                    <div class="layui-inline caculateNumNum">0</div>
                    <a class="layui-inline caculateNumInc">＋</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="layui-col-md12">
            <a class="layui-btn layui-btn-normal addNewRoom" style="">添加房间</a>
            <a class="layui-btn layui-btn-danger delOldRoom" style="">删除房间</a>
        </div>
    </div>

</div>
</div>
<!--<fieldset class="layui-elem-field layui-field-title" style="width: 100%;margin-top: 50px;">-->
    <!--<legend>方框风格的表单集合</legend>-->
<!--</fieldset>-->
<div class="layui-layer-border layui-form" style="margin: 24px;">
    <div class="layui-row">
        <div class="layui-elem-quote site-text" style="margin-bottom: 0">
            <p style="font-size: 18px">与您旅行相关的限制</p>
            <p>新冠 (COVID-19) 疫情提醒：各地旅行要求瞬息万变，包括旅行前是否需要接受新冠 (COVID-19) 检测并在抵达时进行隔离。
                <a href="https://www.gov.il/en/Departments/Guides/flying-to-israel-guidlines?chapterIndex=2" style="color: #01AAED;" target="_blank">请查看与您的行程相关的限制。</a>
            </p>
        </div>
    </div>
</div>

<form id="filterHotelForm" class="layui-layer-border layui-form" style="margin: 24px;">
    <div class="layui-row" style="margin: 10px 30px;padding-bottom:10px;line-height: 50px; border-bottom: 1px solid #ddd">
        <div class="layui-col-md12" style="position: relative;line-height: 30px;">
            <input type="hidden" name="id" value="{$_GET['id']??''}">
            <input type="hidden" name="aid" value="{$_GET['aid']??''}">
            <input type="hidden" name="hid" value="{$_GET['hid']}">
            <input type="hidden" name="hotel_name" value="{$hotelInfo.name|default=''}">
            <div class="layui-inline checkIn_div">
                <span style="padding: 0 10px;">入住时间</span>
                <input type="text" value="{$_GET['checkIn']}" class="layui-input layui-inline" id="checkIn" name="checkIn" placeholder="入住时间">
            </div>
            <div class="layui-inline checkOut_div">
                <span style="padding: 0 10px;">退房时间</span>
                <input type="text" value="{$_GET['checkOut']}" class="layui-input layui-inline" id="checkOut" name="checkOut" placeholder="退房时间">
            </div>

            <div class="layui-inline" style="width:20%;">
                <span style="padding: 0 10px;">房间，人数</span>
                <input type="text" class="layui-input" value="{$_GET['roomAndPerson']}" id="selectRoomAndPerson" name="roomAndPerson" placeholder="请选择房间和入住人数" readonly>
                <input type="hidden" name="occupancy" value="{$_GET['occupancy']}">
            </div>
            <div class="layui-inline" style="margin-left: 20px;">
                <span style="padding: 0 10px;"></span>
                <div class="layui-btn layui-btn-normal layui-btn-radius" lay-submit="" lay-filter="filterHotelRoom" style="display: block">
                    <i class="layui-icon layui-icon-search" style="font-size: 30px;opacity: 0.8;"></i>
                </div>
            </div>
        </div>
    </div>
</form>


<div class="layui-layer-border layui-form" style="margin: 24px;">
    <div class="layui-row" style="margin: 10px 30px;padding-bottom:10px;line-height: 50px; border-bottom: 1px solid #ddd">
        <a onclick="window.history.back(-1);" style="color: #01AAED;">
            <i class="layui-icon layui-icon-return"></i><span style="margin-left: 20px;">返回搜索结果</span>
        </a>
    </div>

    <div class="layui-row" style="margin: 10px 30px;padding-bottom:10px;line-height: 50px; border-bottom: 1px solid #ddd">
        <div class="layui-col-md10">
            <div class="row" style="line-height: 20px;padding: 20px;">
                <div class="layui-col-md12" style="padding-bottom:10px;">
                    <!--标题&星级-->
                    <p style="font-size: 20px;font-weight: bold;">{$hotelInfo.name|default=''}<span style="font-size: 16px;color: orange;text-align: center;margin-left: 10px;">{$hotelInfo.ratings.property.rating|default=0}/5分</span></p>
                    <p style="font-size: 12px;">住客对该酒店的清洁度进行了{$hotelInfo.ratings.property.rating|default=0}/5的评分。</p>
                    <p style="font-size: 12px;">
                        {if $int_star=ceil($hotelInfo['ratings']['property']['rating']) && $int_star_arr = array_fill(0,intval($hotelInfo['ratings']['property']['rating']),'1')}{/if}
                        {foreach name="int_star_arr" id="int_star_value"}
                        <i class="layui-icon layui-icon-rate-solid"></i>
                        {/foreach}
                        {if preg_match("/^\d*\.\d*$/",$hotelInfo['ratings']['property']['rating'])}
                        <i class="layui-icon layui-icon-rate-half"></i>
                        {/if}
                    </p>
                </div>
                {notempty name="$hotelInfo.showTags"}
                <div class="layui-col-md12" style="padding-bottom:10px;">
                    {volist name="hotelInfo.showTags" id="tag_value"}
                    <a class="layui-btn layui-btn-warm layui-btn-sm">{$tag_value}</a>
                    {/volist}
                </div>
                {/notempty}
                {notempty name="$hotelInfo.phone"}
                <div class="layui-col-md12" style="padding-bottom:10px;">
                    <!--标题&星级-->
                    <p>联系方式: <span style="font-size: 14px;text-align: center;margin-left: 10px;">{$hotelInfo.phone|default='无'}</span></p>
                </div>
                {/notempty}
                <!--评分-->
                <!--<div class="layui-col-md12"  style="font-size: 12px;padding-bottom:20px;">-->
                    <!--{notempty name="$hotelInfo.statistics"}{volist name="hotelInfo.statistics" id="statistics_value"}-->
                    <!--{$statistics_value.name} |-->
                    <!--{/volist}{/notempty}-->
                <!--</div>-->

            </div>
        </div>
        <div class="layui-col-md2" style="line-height: 20px;">
            <p style="font-size: 20px">{$hotelInfo['rooms'][0]['rates'][0]['computedPrice']['averageBaseRate']|default=0} {$hotelInfo['rooms'][0]['rates'][0]['computedPrice']['currency']|default='CNY'}</p>
            <p>不含税款和服务费</p>
            <a id="goToSelectRooms" class="layui-btn layui-btn-radius" style="margin-top: 10px;">选择客房</a>
        </div>
    </div>

    <div class="layui-row" style="margin: 10px 30px;padding-bottom:10px;line-height: 50px; border-bottom: 1px solid #ddd">
        <div class="layui-col-md8">
            <div class="layui-carousel" style="text-align: center;" id="test10">
                <div carousel-item="">
                    {notempty name="$hotelInfo.images"}{volist name="hotelInfo.images" id="images_value"}
                    {if $key < 10}
                    <div><img src="{$images_value.links.1000px.href}"></div>
                    {/if}
                    {/volist}{/notempty}
                </div>
            </div>
        </div>
        <div class="layui-col-md4" style="padding:0 16px;">
            <p style="font-size: 18px;font-weight: bold;">周边：</p>
            <div style="line-height: 20px;padding:0 16px;">
                {notempty name="$hotelInfo.descriptions.attractions"}{$hotelInfo.descriptions.attractions}{/notempty}
            </div>
        </div>
    </div>

    <div class="layui-row" style="margin: 10px 30px;padding-bottom:10px;line-height: 50px; border-bottom: 1px solid #ddd">
        <div class="layui-col-md12">
            <!--设施-->
            <div class="layui-row">
                <span style="font-size:18px;font-weight: bold;">设施/服务</span>

            </div>
            <div class="layui-row"  style="padding: 16px;max-height: 100px;overflow: hidden">
                {notempty name="$hotelInfo.amenities"}{volist name="hotelInfo.amenities" id="amenities_value"}
                <div class="layui-col-md2" style="padding: 4px 0;"><i class="layui-icon layui-icon-ok service_icon"></i>{$amenities_value.name}</div>
                {/volist}{/notempty}
            </div>
            <a style="color:dodgerblue;margin-left: 20px;" id="showMoreDetails">查看更多信息</a>
        </div>
    </div>
</div>

<div class="layui-layer-border layui-form" id="selectRoomsBody" style="padding: 30px;margin:0 24px;">
    {if empty($hotelInfo.rooms)}
    <div class="layui-row  layui-panel" style="margin-bottom: 20px;padding: 10px;background: #eee;">
        暂无数据
    </div>
    {else}
    {volist name="hotelInfo.rooms" id="room_value"}
    <div class="layui-row  layui-panel" style="margin-bottom: 20px;padding: 10px;background: #eee;">
        <div class="layui-col-md3" style="margin-bottom: 8px;padding-right:8px;">
            <div class="layui-row">
                <div class="layui-carousel roomImages" style="text-align: center;">
                    <div carousel-item="">
                        {notempty name="$room_value['images']"}{volist name="room_value['images']" id="room_images_value" key="room_images_key"}
                        {if $room_images_key < 5}
                        <div><img src="{$room_images_value.links.350px.href}"></div>
                        {/if}
                        {/volist}{/notempty}
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <p style="font-size: 18px;margin-top: 20px;font-weight: bold;">{$room_value['room_name']|default=''}</p>
            </div>
            <div class="layui-row">
                <div class="layui-col-md12" style="color:#666;line-height: 20px;height: 70px;overflow: hidden;line-height: 10px;">

                </div>
                <div class="layui-col-md12">
                    <a class="showRoomDetails" style="float: right;color: #00a0e9;margin-right: 10px;">查看简介</a>
                    <div style="display: none;">
                        {$room_value['descriptions']['overview']|default=''}
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-col-md9" style="margin-bottom: 8px;padding: 10px;background: #fff;">
            {notempty name="$room_value.rates"}{volist name="room_value['rates']" id="rates_value"}
            <div class="layui-row" style="font-size: 16px;color:#333;line-height: 20px;margin-top: 8px;border-bottom: 1px solid #eee;">
                <div class="layui-col-md4">
                    <p class="padding6-0">
                        {if empty($rates_value['refundable'])}
                        <i class="layui-icon layui-icon-close hotelDetailTips" style="color: red"></i>
                        <span>不可退</span>
                        {else}
                        <i class="layui-icon layui-icon-ok-circle hotelDetailTips" style="color:green"></i>
                        <span>可退</span>
                        {/if}
                    </p>
                    {notempty name="$rates_value['amenities']"}
                    {volist name="rates_value['amenities']" id="amenities_v"}
                    <p class="padding6-0">
                        <i class="layui-icon layui-icon-ok hotelDetailTips"></i>
                        <span>{$amenities_v.name}</span>
                    </p>
                    {/volist}
                    {/notempty}
                </div>
                <div class="layui-col-md4">
                    <div class="padding6-0" style="padding:6px 0;">
                        {volist name="rates_value['bed_groups']" id="bed_v"}
                        {$bed_v.description}
                        {/volist}
                    </div>
                </div>
                <div class="layui-col-md4" style="text-align: right;">
                    <div class="padding6-0" style="font-size:20px;padding:6px 0;font-weight: bold">{$rates_value['computedPrice']['averageBaseRate']} {$rates_value['computedPrice']['currency']}</div>
                    <div class="padding6-0 showPriceDetails" style="padding:6px 0;font-weight: bold;color:#01AAED" data-bed-groups='{$rates_value["bed_groups"]|json_encode}' data-occupancy-pricing='{$rates_value["occupancy_pricing"]|json_encode}' data-computed-price='{$rates_value["computedPrice"]|json_encode}'>价格明细</div>
                    <div class="padding6-0" style="padding:6px 0;font-weight: bold"><a class="layui-btn layui-btn-lg layui-btn-radius prepareRoom">预定</a></div>
                </div>
            </div>
            {/volist}{/notempty}
        </div>
    </div>
    {/volist}

    {/if}

</div>

<div class="layui-layer-border layui-form" style="margin: 24px;" id="HotelDetails">
    <div class="layui-row" style="padding: 20px;">
        <div class="layui-col-md2" style="font-weight: bold;font-size: 20px;">酒店详情</div>
        <div class="layui-col-md10" style="font-size: 14px;">
            <p style="font-weight: bold;font-size: 16px;">介绍</p>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.descriptions.amenities"}
                <div class="layui-col-md1">设施：</div>
                <div class="layui-col-md11">{$hotelInfo.descriptions.amenities}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.descriptions.dining"}
                <div class="layui-col-md1">早餐：</div>
                <div class="layui-col-md11">{$hotelInfo.descriptions.dining}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.descriptions.national_ratings"}
                <div class="layui-col-md1">评分：</div>
                <div class="layui-col-md11">{$hotelInfo.descriptions.national_ratings}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.descriptions.business_amenities"}
                <div class="layui-col-md1">商业服务：</div>
                <div class="layui-col-md11">{$hotelInfo.descriptions.business_amenities}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.descriptions.rooms"}
                <div class="layui-col-md1">房型：</div>
                <div class="layui-col-md11">{$hotelInfo.descriptions.rooms}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.descriptions.attractions"}
                <div class="layui-col-md1">周边：</div>
                <div class="layui-col-md11">{$hotelInfo.descriptions.attractions}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.checkin.location"}
                <div class="layui-col-md1">具体位置：</div>
                <div class="layui-col-md11">{$hotelInfo.checkin.special_instructions}</div>
                {/notempty}
            </div>
        </div>
    </div>
</div>

<div class="layui-layer-border layui-form" style="margin: 24px;">
    <div class="layui-row" style="padding: 20px;">
        <div class="layui-col-md2" style="font-weight: bold;font-size: 20px;">入住须知</div>
        <div class="layui-col-md10" style="font-size: 14px;">
            <p style="font-weight: bold;font-size: 16px;">住宿要求</p>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.checkin.begin_time"}
                <div class="layui-col-md2">最早入住时间：</div>
                <div class="layui-col-md10">{$hotelInfo.checkin.begin_time}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.checkin.begin_time"}
                <div class="layui-col-md2">最晚退房时间：</div>
                <div class="layui-col-md10">{$hotelInfo.checkout.time}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.checkin.instructions"}
                <div class="layui-col-md2">入住提醒：</div>
                <div class="layui-col-md10">{$hotelInfo.checkin.instructions}</div>
                {/notempty}
            </div>
            <div class="layui-row"  style="padding: 8px;">
                {notempty name="$hotelInfo.checkin.special_instructions"}
                <div class="layui-col-md2">入住特殊说明：</div>
                <div class="layui-col-md10">{$hotelInfo.checkin.special_instructions}</div>
                {/notempty}
            </div>
            {notempty name="$hotelInfo.fees.optional"}
            <p style="margin-top: 20px;font-weight: bold;font-size: 16px;">费用说明</p>
            <div class="layui-row"  style="padding: 8px;">
                <p>{$hotelInfo.fees.optional}</p>
            </div>
            {/notempty}
            {notempty name="$hotelInfo.policies.know_before_you_go"}
            <p style="margin-top: 20px;font-weight: bold;font-size: 16px;">政策</p>
            <div class="layui-row" style="padding: 8px;">
                <p>{$hotelInfo.policies.know_before_you_go}</p>
            </div>
            {/notempty}
        </div>
    </div>
</div>

<div class="layui-layer-border layui-form" style="margin: 24px;">
    <div class="layui-row" style="padding: 20px;">
        <div class="layui-col-md2" style="font-weight: bold;font-size: 20px;">设施/服务/规则</div>
        <div class="layui-col-md10" style="font-size: 14px;">
            <div class="layui-row">
            {notempty name="$hotelInfo.amenities"}
            {volist name="hotelInfo.amenities" id="amenity_value" key="key"}
            <div class="layui-col-md4">
                <div class="layui-row" style="padding:6px 0;">
                    <div class="layui-col-md12" data-id="{$key}"><i class="layui-icon layui-icon-ok service_icon"></i>{$amenity_value.name}
                    </div>
                </div>
            </div>
            {/volist}
            {/notempty}
            {notempty name="$hotelInfo.attributes"}
            {volist name="hotelInfo.attributes" id="attributes_value" key="key"}
            {volist name="attributes_value" id="attr_general_value" key=""}
            <div class="layui-col-md4">
                <div class="layui-row" style="padding:6px 0;">
                    <div class="layui-col-md12" data-id="{$key}"><i class="layui-icon layui-icon-ok service_icon"></i>{$attr_general_value.name}
                    </div>
                </div>
            </div>
            {/volist}
            {/volist}
            {/notempty}
            </div>
        </div>
    </div>
</div>

</body>
<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script type="text/javascript">
    layui.use(['layer','form','laydate','carousel'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var carousel = layui.carousel;
        //初始化日期
        var today = formatDate();
        function formatDate(date) {
            var d = new Date(date),
                month = '' + (d.getMonth() + 1),
                day = '' + d.getDate(),
                year = d.getFullYear();

            if (month.length < 2) month = '0' + month;
            if (day.length < 2) day = '0' + day;

            return [year, month, day].join('-');
        }
        //date 格式 new Date(xxx)
        function getTimestamp(date)
        {
            var time =  Date.parse( new Date(date) ).toString();//获取到毫秒的时间戳，精确到毫秒
            return parseInt(time.substr(0,10));
        }

        //重新渲染checkIn
        function renderLaydateCheckIn(max_date='',input_date='')
        {
            $("#checkIn").removeAttr('lay-key');
            var obj = {     //创建时间选择框
                elem: '#checkIn' //指定元素
                ,format: 'yyyy-MM-dd'
                ,value : input_date
                ,min : today
                ,trigger:'click'
                ,type:'date'
                ,done:function (value) {
                    //判断是否入住时间超过退房时间
                    var next_day_timestamp = getTimestamp(value) + 24*3600;
                    var show_date = formatDate(new Date(parseInt(next_day_timestamp) * 1000));
                    renderLaydateCheckOut(show_date,show_date)
                }
            }
            if(max_date!==''){
                var input = '<input type="text" class="layui-input layui-inline" id="checkIn" name="checkIn" placeholder="入住时间">';
                $('#checkIn').remove();
                $('.checkIn_div').append(input);
                obj.max = max_date;
            }
            laydate.render(obj);
        }
        //重新渲染checkOut
        function renderLaydateCheckOut(min_date='',input_date='')
        {
            var obj = {     //创建时间选择框
                elem: '#checkOut' //指定元素
                ,format: 'yyyy-MM-dd'
                ,value : input_date
                ,min : today
                ,trigger:'click'
                ,type:'date'
                ,done:function (value) {

                }
            }
            if(min_date!==''){
                var input = '<input type="text" class="layui-input layui-inline" id="checkOut" name="checkOut" placeholder="退房时间">';
                $('#checkOut').remove();
                $('.checkOut_div').append(input);
                obj.min = min_date;
            }
            laydate.render(obj);
        }
        renderLaydateCheckIn()
        renderLaydateCheckOut()

        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '100%'
            ,height: '600px'
            ,interval: 3000
        });

        $(document).ready(function () {
            $('.roomImages').each(function () {
                carousel.render({
                    elem: this
                    ,width: '100%'
                    ,height: '230px'
                    ,autoplay:false
                });
            })
        })
        $("#showMoreDetails").click(function () {
            var url = window.location.href;
            url = url.split('#');
            window.location.href = url[0] + '#HotelDetails';
        })
        $("#goToSelectRooms").click(function () {
            var url = window.location.href;
            url = url.split('#');
            window.location.href = url[0] + '#selectRoomsBody';
        })
        //初始化输入框
        var filterHotel = layui.data('localData').filterHotel || {};
        var roomInfo = {};

        function initRoomInfo(filterHotel)
        {
            if(filterHotel.length < 1){return false;}
            if(filterHotel.checkIn !=='' && $('input[name=checkIn]').val()==''){$('input[name=checkIn]').val(filterHotel.checkIn)}
            if(filterHotel.checkOut !==''&& $('input[name=checkOut]').val()==''){$('input[name=checkOut]').val(filterHotel.checkOut)}
            if(filterHotel.showTitle !==''&& $('input[name=roomAndPerson]').val()==''){$('input[name=roomAndPerson]').val(decodeURIComponent(filterHotel.showTitle))}
            if(filterHotel.occupancy !==''&& $('input[name=occupancy]').val()==''){$('input[name=occupancy]').val(decodeURIComponent(filterHotel.occupancy))}
            roomInfo = filterHotel.roomInfo;
        }
        initRoomInfo(filterHotel);

        $('#selectRoomAndPerson').click(function (data) {
            //弹出选择框
            showSelectRoomAndPersonTemplate();
        })

        function showSelectRoomAndPersonTemplate() {
            // var template = $("#selectRoomAndPersonTemplate").html()
            var template = getSelectRoomAndPersonTemplateHtml();
            layer.open({
                type:1,
                title:'选择房间和人数',
                content:'<div id="selectRoomAndPersonBox">'+template+'</div>',
                area:['50%','80%'],
                btn: ['确认', '取消'],
                shadeClose:true,
                success:function(res){
                    //根据数据还原界面
                    $.each(roomInfo.rooms,function (i,v) {
                        var html = getOneRoomHtml(i+1,v)
                        $('#selectRoomAndPersonBox .roomList').append(html);
                    })
                    //渲染完成触发事件
                    form.render();

                },
                yes:function (res) {
                    //判断信息是否完成并统计信息
                    //初始化数据
                    roomInfo = {roomCount:0,totalPerson:0,rooms:[]};
                    $("#selectRoomAndPersonBox .roomList").children().each(function (i,v) {
                        var adult = parseInt($(v).find('.person .caculateNumNum').text());
                        var child = parseInt($(v).find('.children .caculateNumNum').text());
                        var childAges = [];
                        $(v).find('select[name=ages]').each(function (ii,vv) {
                            childAges.push($(vv).val());
                        })
                        var room = {adult,child,childAges};
                        roomInfo.roomCount ++ ;
                        roomInfo.totalPerson += adult + child;
                        roomInfo.rooms.push(room);
                    })
                    var inputVal = roomInfo.roomCount+'间房，'+roomInfo.totalPerson+'个人';
                    $('#selectRoomAndPerson').val(inputVal)
                    console.log(roomInfo);
                    //确认按钮触发事件
                    layer.closeAll('page'); //关闭所有页面层
                },

            })
        }

        function getChildAgesParentHtml(childAges=[]) {
            var childrenAgeSelect = '';
            $.each(childAges,function (i,v) {
                childrenAgeSelect += getChildAgesHtml(v)
            })
            return '<div class="layui-row padding6 children">\n' +
                '                <div class="layui-col-md6 personName">儿童年龄</div>\n' +
                '                <div class="layui-col-md6 childrenAgeSelect">\n' + childrenAgeSelect +
                '                </div>\n' +
                '            </div>';
        }

        function getChildAgesHtml(selectAge='') {
            var MaxAge = 18;
            var option = '';
            for(var i=1;i< MaxAge;i++){
                var selected = '';
                if(i==selectAge){selected='selected'}
                option += '<option value="'+ i +'" '+selected+'>' + i + '</option>';
            }

            return '<div class="layui-inline"><select name="ages" id="" class="layui-select">' + option + '</select></div>';
        }

        function getOneRoomHtml(roomNo,roomInfo){
            if(roomInfo.length < 1){roomInfo = {adult:1,child:0,childAges:[]}}
            var html = getSelectRoomAndPersonTemplateRoomHtml(roomNo,roomInfo);
            return html;
        }

        $(document).on('click','.addNewRoom',function () {
            var roomCount = $('#selectRoomAndPersonBox .roomList').children().length;
            var html = getOneRoomHtml(roomCount,{})
            $('#selectRoomAndPersonBox .roomList').append(html);

        })

        $(document).on('click','.delOldRoom',function () {
            $('#selectRoomAndPersonBox .roomList').children().last().remove();
        })

        $(document).on('click','.caculateNumDec',function () {
            var number = $(this).next().text();
            var isChildNode = $(this).parent().parent().hasClass('children');
            var number = parseInt(number) - 1;
            if(number <= 0 && !isChildNode){layer.msg('人数至少为1');return false;
            }else if(number < 0 && isChildNode){layer.msg('人数不能小于0');return false;}
            $(this).next().text(number);
            var childrenAgeSelect = $(this).parent().parent().next().find('.childrenAgeSelect');
            if(childrenAgeSelect.children().length == 1){
                $(this).parent().parent().next().remove();
            }else{
                childrenAgeSelect.children().last().remove();
            }
            form.render();
        })

        $(document).on('click','.caculateNumInc',function () {
            var number = $(this).prev().text();
            var isChildNode = $(this).parent().parent().hasClass('children');
            var number = parseInt(number) + 1;
            if(number > 8 && !isChildNode){layer.msg('每间房不能超过8人');return false;
            }else if(number > 4 && isChildNode){layer.msg('儿童人数不能超过4');return false;}
            $(this).prev().text(number);
            //渲染选择儿童年龄的select
            if($(this).parent().parent().next().length < 1){
                //创建儿童年龄选择框
                var childrenAgeSelect = getChildAgesParentHtml(['1'])
                $(this).parent().parent().parent().append(childrenAgeSelect)
            }else{
                var childrenAgeSelect = getChildAgesHtml('1');
                $(this).parent().parent().next().find('.childrenAgeSelect').append(childrenAgeSelect);
            }
            form.render();
        })

        function getSelectRoomAndPersonTemplateHtml() {
            return '<div class="layui-form roomAndPersonShade">\n' +
                '    <div class="row roomList">\n' +
                '    </div>\n' +
                '    <div class="row">\n' +
                '        <div class="layui-cll-md12">\n' +
                '            <a class="layui-btn layui-btn-normal addNewRoom" style="">添加房间</a>\n' +
                '            <a class="layui-btn layui-btn-danger delOldRoom" style="">删除房间</a>\n' +
                '        </div>\n' +
                '    </div>\n' +
                '\n' +
                '</div>';
        }

        function getSelectRoomAndPersonTemplateAdultHtml(number)
        {
            return getSelectRoomAndPersonTemplateItemHtml('成人','18岁及以上',number,'person')
        }

        function getSelectRoomAndPersonTemplateChildHtml(number)
        {
            return getSelectRoomAndPersonTemplateItemHtml('儿童','0-17岁',number,'children',)
        }

        function getSelectRoomAndPersonTemplateChildAgesHtml(childAges)
        {
            if(childAges.length < 1){
                return ''
            }else{
                return getChildAgesParentHtml(childAges);

            }
        }

        function getSelectRoomAndPersonTemplateItemHtml(title,ageDesc,number,className)
        {
            return '<div class="layui-row padding6 '+className+'">\n' +
                '                <div class="layui-col-md6 personName">'+title+'<br><span class="personAge">'+ageDesc+'</span></div>\n' +
                '                <div class="layui-col-md6 caculateNum">\n' +
                '                    <a class="layui-inline caculateNumDec">－</a>\n' +
                '                    <div class="layui-inline caculateNumNum">'+number+'</div>\n' +
                '                    <a class="layui-inline caculateNumInc">＋</a>\n' +
                '                </div>\n' +
                '            </div>';
        }

        //获取房间号
        function getSelectRoomAndPersonTemplateRoomNoHtml(roomNo){
            return '<div class="layui-row padding6">\n' +
                '                <div class="layui-col-md6 roomTitle">房间<span class="roomNo">'+roomNo+'</span>\n' +
                '                </div>\n' +
                '            </div>';
        }

        function getSelectRoomAndPersonTemplateRoomHtml(roomNo,roomInfo) {
            return '<div class="layui-col-md12 marginBtm20" >'
                + getSelectRoomAndPersonTemplateRoomNoHtml(roomNo)
                + getSelectRoomAndPersonTemplateAdultHtml(roomInfo.adult || 1)
                + getSelectRoomAndPersonTemplateChildHtml(roomInfo.child || 0)
                + getSelectRoomAndPersonTemplateChildAgesHtml(roomInfo.childAges || [])
                '</div>';
        }

        function getFilterHotelObj() {
            filterHotel.checkIn = $('input[name=checkIn]').val();
            filterHotel.checkOut = $('input[name=checkOut]').val();
            filterHotel.showTitle = $('input[name=roomAndPerson]').val();
            filterHotel.occupancy = $('input[name=occupancy]').val();
            filterHotel.hid = $('input[name=hid]').val();
            filterHotel.roomInfo = roomInfo;
            return filterHotel;
        }

        form.on('submit(filterHotelRoom)',function(data){
            // var filterHotel = getFilterHotelObj();
            // console.log(filterHotel);
            var prams = $('#filterHotelForm').serialize();
            window.location.href = '/admin/hotel/tripmakehotelinfo?' + prams;
        })

        $(document).on('click','.showRoomDetails',function () {
            var jsonData = $(this).next().html();
            console.log(jsonData);
            layer.open({
                title:'房间简介',
                type:1,
                area:['80%','50%'],
                content:"<div style='padding:20px;'>"+jsonData+"</div>",
                shadeClose:true,
                done:function () {
                    
                }
            })
        })

        $(document).on('click','.showPriceDetails',function () {
            var occupancyPricingData = $(this).attr('data-occupancy-pricing');
            var computedPriceData = $(this).attr('data-computed-price');
            occupancyPricingData = JSON.parse(occupancyPricingData);
            computedPriceData = JSON.parse(computedPriceData);
            console.log(occupancyPricingData,computedPriceData);
            var html = getShowPriceDetailsHtml(occupancyPricingData,computedPriceData);
            layer.open({
                title:'价格明细',
                type:1,
                area:['60%','80%'],
                content:"<div class='shadowPriceDetails' style='padding:20px;font-size: 16px;line-height:36px;'>"+html+"</div>",
                shadeClose:true,
                done:function () {

                }
            })
        })


        function getShowPriceDetailsHtml(occupancyPricingData,computedPriceData)
        {
            var html ='<div class="layui-row" style="border-bottom:1px solid #ddd;font-size:18px;">共' +computedPriceData.roomCount + '间房，'+computedPriceData.dayCount + '晚</div>';
            var roomNum = 0;
            $.each(occupancyPricingData,function (occupancy_k,occupancy_v) {
                html +='<div class="layui-row"><div class="layui-col-md8">第'+(++roomNum)+'间房</div><div class="layui-col-md4"></div></div>';
                html +='<div class="layui-row" style="padding:0 16px;font-size: 12px;">';
                $.each(occupancy_v.nightly,function (nightly_k,nightly_v) {
                    $.each(nightly_v,function (fee_k,fee_v) {
                        switch (fee_v.type) {
                            case 'tax_and_service_fee':
                                html +='<div class="layui-row"><div class="layui-col-md8">服务费+税费</div><div class="layui-col-md4">' + fee_v.value + ' '+ fee_v.currency + '</div></div>';break;
                            case 'base_rate':
                                html +='<div class="layui-row"><div class="layui-col-md8">基础费用</div><div class="layui-col-md4">' + fee_v.value + ' '+ fee_v.currency + '</div></div>';break;
                            default:
                                html +='<div class="layui-row"><div class="layui-col-md8">其他费用</div><div class="layui-col-md4">' + fee_v.value + ' '+ fee_v.currency + '</div></div>';break;
                                break;
                        }
                    })
                })
                html += '</div>';
            })
            html += '<div style="font-size: 16px;margin-top: 10px;border-top:1px solid #ddd">';
            html += '<div class="layui-row"><div class="layui-col-md8">房费(不含税)</div><div class="layui-col-md4">' + computedPriceData.totalBaseRate
                +' '+ computedPriceData.currency + '</div></div>';
            html += '<div class="layui-row"><div class="layui-col-md8">税费</div><div class="layui-col-md4">' + computedPriceData.totalTaxRate
                +' '+ computedPriceData.currency + '</div></div>';
            html += '<div class="layui-row" style="font-size: 20px;"><div class="layui-col-md8">总价格</div><div class="layui-col-md4">' + computedPriceData.totalPrice
                +' '+ computedPriceData.currency + '</div></div>';
            html += '</div>';
            return html;
        }


        $(document).on('click','.prepareRoom',function () {
            var that = this;
            layer.confirm('<span style="font-weight: bold;">【{$tripInfo.name}】</span><br>' +
                '确定将此酒店加入<span style="font-weight: bold;">【{$tripCustomerInfo.nickname}】</span>的定制计划？',function(){
                var trip_id = $("input[name=id]").val();
                var active_id = $("input[name=aid]").val();
                var hotel_id = $("input[name=hid]").val();
                var bed_groups = JSON.parse($(that).parent().prev().attr('data-bed-groups'));
                var occupancy_price = JSON.parse($(that).parent().prev().attr('data-occupancy-pricing'));
                var computed_price = JSON.parse($(that).parent().prev().attr('data-computed-price'));
                var hotel_json = {
                    hotel_id:hotel_id,
                    hotel_name:$("input[name=hotel_name]").val(),
                    check_in:$("input[name=checkIn]").val(),
                    check_out:$("input[name=checkOut]").val(),
                    occupancy:$("input[name=occupancy]").val(),
                    bed_groups:bed_groups,
                    occupancy_price:occupancy_price,
                    computed_price:computed_price,
                };
                $.post("{:url('admin/quicktrip/joinExpediaHotel')}",{trip_id,active_id,hotel_id,hotel_json},function (res) {
                    layer.msg(res.msg);
                    if(res.code > 0){
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        },1000)
                    }
                },'json')
            })
        })
    })
</script>
</html>